<template>
  <view class="page-default">
    <c-nav-bar title="证件照" type="white" bg-color="rgba(255,255,255,0.6)" />
    <view class="bg-#FEF9D9">
      <view class="px-6 py-2 text-xs text-#E7B710">
        注：证件照为白底、比例3:4、格式为JPG，文件大小≤2M。
      </view>
    </view>
    <view class="mx-2 rounded-lb-4 rounded-rb-4 pb-4">
      <view class="m-3 mt-6 flex items-center px-4 text-#1A2B5C font-bold">
        <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />个人证件照
      </view>
      <view class="m-3 mt-6 rounded-2 bg-white px-12 py-8">
        <up-upload
          class="photo-upload"
          :file-list="fileList1"
          name="1"
          multiple
          :max-count="1"
        >
          <view class="upload-file h-80 w-full">
            <view class="text-center">
              <view class="flex items-center justify-center">
                <up-icon name="camera-fill" size="40" color="#C5C9D1" />
              </view>
              <view class="w-full text-#C5C9D1">
                上传证件照
              </view>
            </view>
          </view>
        </up-upload>
      </view>

      <view class="mx-8">
        <u-button size="default" shape="circle" class="gradient-button mb-6 mt-8" @click="goNextPage">
          <text class="text-base text-white">
            提交
          </text>
        </u-button>
      </view>

      <view class="text-center text-xs text-#FC2D57">
        对不起，当前上传的图片不符合要求
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
// 响应式表单数据
const fileList1 = ref([]);
</script>

<style lang="scss" scoped>
.photo-upload{
  display: block;
}
:deep(.photo-upload  .u-upload__wrap){
  display: block;
}
.upload-file{
  border: 1px #E0E7EC dashed;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
